<template>
  <div class="card_key">
    <div class="header_title">
      <span>卡密钥参数配置</span>
    </div>
    <div class="card_list">
      <el-form
        ref="alldata"
        :model="alldata"
        :rules="alldatarule"
        :label-position="labelPosition"
        label-width="110px"
        class="clearfix"
      >
        <el-col :span="8">
          <el-form-item label="公共扇区:" prop="publicSector">
            <el-col :span="18">
              <el-select
                v-model="alldata.publicSector"
                placeholder="请选择"
                size="mini"
                @change="selectSector"
              >
                <el-option
                  v-for="item in cardpublicoption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="金额扇区:" prop="balanceSector">
            <el-col :span="18">
              <el-select
                v-model="alldata.balanceSector"
                placeholder="请选择"
                size="mini"
                @change="selectSector2"
              >
                <el-option
                  v-for="item in cardpublicoption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="脱机流水扇区:" prop="recordSector">
            <el-col :span="18">
              <el-select
                v-model="alldata.recordSector"
                placeholder="请选择"
                size="mini"
                @change="selectSector3"
              >
                <el-option
                  v-for="item in cardpublicoption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订餐扇区:" prop="orderSector">
            <el-col :span="18">
              <el-select
                v-model="alldata.orderSector"
                placeholder="请选择"
                size="mini"
                @change="selectSector4"
              >
                <el-option
                  v-for="item in cardpublicoption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="卡密钥1:" prop="unitPid">
            <el-col :span="18">
              <el-input v-model="alldata.cardKey1" size="mini" show-password></el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="卡密钥2:" prop="unitPid">
            <el-col :span="18">
              <el-input v-model="alldata.cardKey2" size="mini" show-password></el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="系统识别码:" prop="sid">
            <el-col :span="18">
              <el-input v-model="alldata.sid" size="mini"></el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="卡类型:" prop="cardType">
            <el-col :span="18">
              <el-select
                v-model="alldata.cardType"
                placeholder="请选择"
                size="mini"
                @change="selectSector4"
              >
                <el-option
                  v-for="item in cartypeoption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名单分区字节序号:" prop="rosterOrder" label-width="130px">
            <el-col :span="18">
              <el-select
                v-model="alldata.rosterOrder"
                placeholder="请选择"
                size="mini"
                @change="selectSector2"
              >
                <el-option
                  v-for="item in rosterOrderOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="isEncryption">
            <el-col :span="15">
              <el-checkbox v-model="alldata.isEncryption">是否可加密卡</el-checkbox>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-col :span="18">
              <el-button type="primary" @click="onSubmit()">保存信息</el-button>
            </el-col>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rosterOrderOption: [
        {
          label: '0',
          value: 0
        },
        {
          label: '1',
          value: 1
        },
        {
          label: '2',
          value: 2
        },
        {
          label: '3',
          value: 3
        }
      ],
      cardpublicoption: [
        {
          label: '扇区1',
          value: 1
        },
        {
          label: '扇区2',
          value: 2
        },
        {
          label: '扇区3',
          value: 3
        },
        {
          label: '扇区4',
          value: 4
        },
        {
          label: '扇区5',
          value: 5
        },
        {
          label: '扇区6',
          value: 6
        },
        {
          label: '扇区7',
          value: 7
        },
        {
          label: '扇区8',
          value: 8
        },
        {
          label: '扇区9',
          value: 9
        },
        {
          label: '扇区10',
          value: 10
        },
        {
          label: '扇区11',
          value: 11
        },
        {
          label: '扇区12',
          value: 12
        },
        {
          label: '扇区13',
          value: 13
        },
        {
          label: '扇区14',
          value: 14
        },
        {
          label: '扇区15',
          value: 15
        }
      ],
      cartypeoption: [
        {
          label: 'IC卡',
          value: 4
        },
        {
          label: 'CPU卡',
          value: 5
        }
      ],
      alldata: {
        //公共扇区
        publicSector: '',
        // 金额扇区
        balanceSector: '',
        // 脱机流水扇区
        recordSector: '',
        //订餐扇区
        orderSector: '',
        //卡密钥1
        cardKey1: '',
        //卡密钥2
        cardKey2: '',
        //系统识别码
        sid: '',
        //卡类型
        cardType: '',
        pkConfigId: '',
        unitGuid: '',
        isEncryption: false,
        /**
         * 名单分区序号 0 - 3
         */
        rosterOrder: ''
      },
      alldatarule: {},
      labelPosition: 'right'
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  mounted() {
    this.getcardcofing()
  },
  methods: {
    //获取卡配置参数
    getcardcofing() {
      this.$http({
        url: this.$http.adornUrl('/card/config'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.alldata.publicSector = data.messageContent.publicSector
          this.alldata.balanceSector = data.messageContent.balanceSector
          this.alldata.publicSector = data.messageContent.publicSector
          this.alldata.recordSector = data.messageContent.recordSector
          this.alldata.orderSector = data.messageContent.orderSector
          this.alldata.cardKey1 = data.messageContent.cardKey1
          this.alldata.cardKey2 = data.messageContent.cardKey2
          this.alldata.sid = data.messageContent.sid
          this.alldata.cardType = data.messageContent.cardType
          this.alldata.pkConfigId = data.messageContent.pkConfigId
          this.alldata.unitGuid = data.messageContent.unitGuid
          this.alldata.isEncryption = data.messageContent.isEncryption
            ? true
            : false
          this.alldata.rosterOrder = data.messageContent.rosterOrder

        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: 'error'
          })
        }
      })
    },
    //更改信息
    updatedcard() {
      this.$http({
        url: this.$http.adornUrl('/card/update-config'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            balanceSector: this.alldata.balanceSector,
            unitGuid: this.changeschoolid,
            cardKey1: this.alldata.cardKey1,
            cardKey2: this.alldata.cardKey2,
            cardType: this.alldata.cardType,
            orderSector: this.alldata.orderSector,
            pkConfigId: this.alldata.pkConfigId,
            publicSector: this.alldata.publicSector,
            recordSector: this.alldata.recordSector,
            sid: this.alldata.sid,
            isEncryption: this.alldata.isEncryption ? 1 : 0,
            rosterOrder: this.alldata.rosterOrder
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            showClose: true,
            message: '单位卡配置成功',
            type: 'success'
          })
          this.getcardcofing()
        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: 'error'
          })
        }
      })
    },
    //扇区选择
    selectSector() {
      if (this.alldata.publicSector == this.alldata.balanceSector) {
        this.$message({
          message: '该扇区与金额扇区冲突',
          type: 'warning'
        })
        this.alldata.publicSector = ''
        return
      }
      if (this.alldata.publicSector == this.alldata.recordSector) {
        this.$message({
          message: '该扇区与脱机流水扇区冲突',
          type: 'warning'
        })
        this.alldata.publicSector = ''
        return
      }
      if (this.alldata.publicSector == this.alldata.orderSector) {
        this.$message({
          message: '该扇区与订餐区冲突',
          type: 'warning'
        })
        this.alldata.publicSector = ''
        return
      }
    },
    selectSector2() {
      if (this.alldata.balanceSector == this.alldata.publicSector) {
        this.$message({
          message: '该扇区与公共扇区冲突',
          type: 'warning'
        })
        this.alldata.balanceSector = ''
        return
      }
      if (this.alldata.balanceSector == this.alldata.recordSector) {
        this.$message({
          message: '该扇区与脱机流水扇区冲突',
          type: 'warning'
        })
        this.alldata.balanceSector = ''
        return
      }
      if (this.alldata.balanceSector == this.alldata.orderSector) {
        this.$message({
          message: '该扇区与订餐区冲突',
          type: 'warning'
        })
        this.alldata.balanceSector = ''
        return
      }
    },
    selectSector3() {
      if (this.alldata.recordSector == this.alldata.publicSector) {
        this.$message({
          message: '该扇区与公共扇区冲突',
          type: 'warning'
        })
        this.alldata.recordSector = ''
        return
      }
      if (this.alldata.recordSector == this.alldata.balanceSector) {
        this.$message({
          message: '该扇区与金额扇区冲突',
          type: 'warning'
        })
        this.alldata.recordSector = ''
        return
      }
      if (this.alldata.recordSector == this.alldata.orderSector) {
        this.$message({
          message: '该扇区与订餐区冲突',
          type: 'warning'
        })
        this.alldata.recordSector = ''
        return
      }
    },
    selectSector4() {
      if (this.alldata.orderSector == this.alldata.publicSector) {
        this.$message({
          message: '该扇区与公共扇区冲突',
          type: 'warning'
        })
        this.alldata.orderSector = ''
        return
      }
      if (this.alldata.orderSector == this.alldata.balanceSector) {
        this.$message({
          message: '该扇区与金额扇区冲突',
          type: 'warning'
        })
        this.alldata.orderSector = ''
        return
      }
      if (this.alldata.orderSector == this.alldata.recordSector) {
        this.$message({
          message: '该扇区与脱机流水扇区冲突',
          type: 'warning'
        })
        this.alldata.orderSector = ''
        return
      }
    },
    //修改信息
    onSubmit() {
      this.updatedcard()
    }
  }
}
</script>

<style lang="scss" scoped>
.card_key {
  padding: 10px;
  .clearfix:after {
    content: '.';
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: block;
  }
  .clearfix {
    zoom: 1;
  }
  .header_title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e5e9f2;
    color: #909399;
  }
  .card_list {
    font-size: 16px;
    font-weight: bold;
    color: #909399;
    padding-top: 20px;
    .el-form-item {
      padding-left: 22px;
      // padding-top: 5px;
      height: 50px;
      line-height: 70px;
      margin-bottom: 0px;
      width: 100%;
    }
    .el-form-item:last-child {
      border-bottom: 0px solid #e5e9f2;
    }
    // .saveinfo{
    //     border-top: 1px solid #e5e9f2;
    //     padding-top: 20px;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    // }
  }
}
</style>